<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>学习记录</el-breadcrumb-item>
      <el-breadcrumb-item>学习记录</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row>
        <el-col :span="4">
          <el-select v-model="queryParam.chapterId" clearable @clear="search" @change="search" placeholder="请选择章节">
            <el-option v-for="item in chapters" :key="item.chapterId" :value="item.chapterId" :label="item.chapterName"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select v-model="queryParam.coursewareType" clearable @clear="search" @change="search" placeholder="请选择资源类型">
            <el-option v-for="item in coursewareTypes" :key="item.coursewareType" :value="item.coursewareType" :label="item.coursewareTypeName"></el-option>
          </el-select>
        </el-col>
        <!-- 学号搜索 -->
        <el-col :span="5">
          <el-input 
            placeholder="请输入学号" 
            v-model="queryParam.userName"
            clearable
            @clear="search">
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <!-- 章节列表区域 -->
      <el-table :data="tableData" border stripe>
        <el-table-column type="index" />
        <el-table-column label="章节" prop="chapterId" :formatter="chapterFormatter"/>
        <el-table-column label="课件" prop="coursewareName" />
        <el-table-column label="类型" prop="coursewareType" :formatter="coursewareFormatter"/>
        <el-table-column label="学号" prop="createUserName" />
        <el-table-column label="姓名" prop="createRealName" />
        <el-table-column label="学习次数" prop="count" />
      </el-table>
      <!-- 分页区域 -->
      <pagination 
        v-show="total>0" 
        :total="total" 
        :page.sync="queryParam.pageIndex" 
        :limit.sync="queryParam.pageSize"
        @pagination="query"/>
    </el-card>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import Pagination from '@/components/Pagination'
import learningRecordesApi from '@/api/learningRecordes'
export default {
  components: { Pagination },
  data() {
    return {
      queryParam: {
        pageIndex: null,
        pageSize: null,
        level: null,
        chapterId: null,
        coursewareType: null,
        userName: null,
      },
      // 获取到的总条数
      total: 0,
      // 表格数据绑定的对象
      tableData: [],
      coursewareTypes: [
        {
          coursewareType: 1,
          coursewareTypeName: '视频'
        },
        {
          coursewareType: 2,
          coursewareTypeName: '文档'
        },
      ]
    }
  },
  props: {
    mainLevel: {
      type: Number
    }
  },
  watch: {
    mainLevel() {
      this.search()
    }
  },
  created() {
    this.search()
  },
  methods: {
    search() {
      this.queryParam.pageIndex = this.page.pageIndex
      this.queryParam.pageSize = this.page.pageSize
      this.query()
    },
    query() {
      this.queryParam.level = this.mainLevel
      learningRecordesApi.pageList(this.queryParam).then(data => {
        
        if (data.code === this.ok.code) {
          if (data.response.list) {
            this.tableData = data.response.list
            this.total = data.response.total
            this.queryParam.pageIndex = data.response.pageNum
          } else {
            this.total = 0
            this.queryParam.pageIndex = 1
          }
        }
      })
    },
    chapterFormatter(row, column, cellValue, index) {
      return this.chapterEnumFormat(cellValue)
    },
    // 性别转换
    coursewareFormatter (row, column, cellValue, index) {
      return this.enumFormat(this.coursewareEnum, cellValue)
    },
  },
  computed: {
    ...mapGetters('chapter', [
      'chapterEnumFormat'
    ]),
    ...mapGetters('enumItem', [
      'enumFormat'
    ]),
    ...mapState('page', {
      page: state => state.page
    }),
    ...mapState('resCode', {
      ok: state => state.OK
    }),
    ...mapState('chapter', {
      chapters: state => state.chapters
    }),
    ...mapState('enumItem', {
      coursewareEnum: state => state.courseware.coursewareEnum
    })
  }
}
</script>

<style lang="less" scoped>

</style>